<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>定位</title>
	<style>
		*{
			padding: 0;
			margin: 0;
			list-style: none;
			box-sizing: border-box;
		}
		
		.box1,.box2,.box3{
			width: 200px;
			height: 200px;
			background-color: #00f;
			margin: 0 auto;
			position: fixed;
		}
		
		.box1{
			top: 50px;
			left: 50px;
			z-index: -3;
		}
		
		.box2{
			background-color: #0f0;
			/* position: relative; */
			/* position: relative;
			top: 30px;
			left: 30px; */
			
			/* position: fixed;
			bottom: 50px;
			right: 50px; */
			
			top: 150px;
			left: 150px;
			z-index: -1;
		}
		
		.zi{
			width: 50px;
			height: 50px;
			background-color: #ccc;
			position: absolute;
			top: 30px;
			left: 30px;
		}
		
		.box3{
			background-color: #f00;
			top: 100px;
			left: 100px;
			z-index: -5;
		}
		
		.box4{
			height: 100px;
			background-color: #ccc;
			position: sticky;
			top: 20px;
		}
		
		.box>div{
			float: left;
			background-color: #0f0;
			padding: 10px 20px;
			margin: 10px;
			cursor: pointer;
			position: relative;
		}
		
		.box>div:hover{
			color: #fff;
		}
		
		.box ul{
			position: absolute;
			top: 40px;
			left: 0;
			border: 1px solid #ccc;
			width: 100%;
			color: #000;
			display: none;
		}
		
		.box>div:hover ul{
			display: block;
		}
		
		.box li{
			padding: 3px 0;
			text-align: center;
		}
		
		.box li:hover{
			background-color: #0f0;
			color: #fff;
		}
		
		
		/* hover效果
1.先正常布局
2.将hover的盒子放进去
3.定位  position: absolute;top: 0;left: 0;  position: relative; 
4.做隐藏
*/

	

	</style>
</head>

<body>
	<pre>
			CSS的定位
			position    指定了元素的定位类型
			    absolute	生成绝对定位的元素，相对于第一个设有position的父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。  脱离标准文档流  不占位置  
			
			    fixed	    生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。   脱离标准文档流  不占位置
			
			    relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。   占位置
			
				sticky:吸顶效果
			top:定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
			right:定义了定位元素右外边距边界与其包含块右边界之间的偏移。
			bootom:定义了定位元素下外边距边界与其包含块下边界之间的偏移。
			left:定义了定位元素左外边距边界与其包含块左边界之间的偏移。
			z-index:元素的在z轴的前后顺序     absolute  relative  fixed
			    数值表示   数值越大越靠前(上)   可以是负值
		</pre>
		
		
		<!-- <div class="box1"></div>
		<div class="box2">
			<div class="zi"></div>
		</div>
		<div class="box3"></div> -->
		
		<!-- <div class="box4"></div> -->
	
	
	
	<div class="box">
		<div>列表项1
			<ul>
				<li>每一项1</li>
				<li>每一项2</li>
				<li>每一项3</li>
				<li>每一项4</li>
			</ul>
		</div>
		<div>列表项2
			<ul>
				<li>每一项5</li>
				<li>每一项2</li>
				<li>每一项3</li>
				<li>每一项4</li>
			</ul>
		</div>
		<div>列表项3
			<ul>
				<li>每一项6</li>
				<li>每一项2</li>
				<li>每一项3</li>
				<li>每一项4</li>
			</ul>
		</div>
		<div>列表项4
			<ul>
				<li>每一项7</li>
				<li>每一项2</li>
				<li>每一项3</li>
				<li>每一项4</li>
			</ul>
		</div>
		<p style="clear: both;"></p>
	</div>
	




	<div style="height: 1500px;"></div>

</body>

</html>